<template>
  <div class="slot-demo-container">
    <h1>Vue 插槽示例</h1>

    <!-- 默认插槽 -->
    <section>
      <h2>1. 默认插槽</h2>
      <DefaultSlot>
        <p>这是父组件传入的自定义内容</p>
      </DefaultSlot>
      
      <DefaultSlot />
    </section>

    <!-- 具名插槽 -->
    <section>
      <h2>2. 具名插槽</h2>
      <NamedSlot>
        <template v-slot:header>
          <h3>自定义头部</h3>
        </template>

        <template v-slot:footer>
          <p>自定义底部</p>
        </template>

        <p>自定义主体内容</p>
      </NamedSlot>
    </section>

    <!-- 作用域插槽 -->
    <section>
      <h2>3. 作用域插槽</h2>
      <ScopedSlot>
        <template v-slot="slotProps">
          <div>
            <h3>用户列表（自定义渲染）</h3>
            <p v-for="user in slotProps.users" :key="user.id">
              {{ slotProps.formatUser(user) }}
            </p>
          </div>
        </template>
      </ScopedSlot>
    </section>
  </div>
</template>

<script setup>
import DefaultSlot from './DefaultSlot.vue'
import NamedSlot from './NamedSlot.vue'
import ScopedSlot from './ScopedSlot.vue'
</script>

<style scoped>
.slot-demo-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
section {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #e0e0e0;
}
</style>
